<template>
  <div
    ref="treeMenu"
    class="tree-menu">
    <div class="title" v-if="title" ref="titleRef">
      {{title}}
    </div>
    <div class="tree-con">
      <div ref="inputBtnRef">
        <el-input v-if="input"
                  v-model="filterText"
                  ref="inputRef"
                  size="small"
                  placeholder="搜索"></el-input>
        <el-row v-if="showBtn"
                ref="btnRef">
          <el-col :span="24">
            <el-button class="submit-btn" v-if="showBtn"
                       :disabled="clearBtnDis" size="mini"
                       @click="resetChecked">清除</el-button>
          </el-col>
        </el-row>
      </div>

      <el-scrollbar class="tree-scroll"
                    :style="{height:treeOnHeight}">
        <el-tree
          class="filter-tree"
          ref="tree"
          empty-text="没有数据"
          :data="treeData"
          :props="defaultProps"
          :default-checked-keys="defaultChooses"
          @check-change="handleCheckChange"
          :expand-on-click-node="false"
          :node-key="nodeKey"
          :show-checkbox="checkbox"
          :filter-node-method="filterNode"
          :check-on-click-node="true"
          :check-strictly="false"
          @node-click="onclickNode"
          :default-expand-all="expandAll" >
          <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                 <i v-if="showIcon"
                    :class="node.childNodes.length !== 0 ? 'el-icon-folder-opened' : 'el-icon-document'"></i>{{node.label}}
              </span>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      clearBtnDis: true,
      filterText: '',
      treeHeight: '',
      inputBtnHeight: '',
      titleHeight: ''
    }
  },
  /**
     * input 是否需要搜索框，true为显示，false为隐藏
     * checkbox 是否需要多选框，true为显示，false为隐藏
     * expandAll 是否需要默认全部展开
     * treeData 用于展示树目录的数据
     * defaultProps 定义目录元素
     *      defaultProps {
   *        id: "configTypeId",  id对应treeData中的id
            label: 'configTypeDesc', label对应treeData中用来显示的数据
            children: 'childSystemConfigTypeBeans' children对应treeData中的字节点名字
   *      }
     * nodeKey 每个节点的key值
     * showBtn 是否展示按钮
     * title 题目
     * clickNode 点击节点时的回调事件
     * showIcon 是否展示图标
     * defaultChooses 默认选中的Id
     *
     * defaultHeightLight 默认高亮的id
     *
     * needDefaultExpandedKeys 是否在点击的时候展开的节点不收起
     *
     *
     * 如何绑定自己父组件的参数:
     *    在引用组件时添加属性：
     *    :getChooses.sync="你的参数名"
     */
  props: [
    'input',
    'checkbox',
    'expandAll',
    'treeData',
    'defaultProps',
    'nodeKey',
    'showBtn',
    'title',
    'clickNode',
    'showIcon',
    'defaultChooses',
    'defaultHeightLight',
    'needDefaultExpandedKeys'],
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    },
    // 避免异步获取树数据的情况下创建时没有值，所以监听树的数据，当有数据时，进行默认高亮设置
    treeData (val) {
      if (val) {
        this.$nextTick(() => {
          // treeBox 元素的ref   value 绑定的node-key
          if (this.defaultHeightLight) {
            this.$refs.tree.setCurrentKey(this.defaultHeightLight)
          }
        })
      }
    }
  },
  created () {
    this.$nextTick(() => {
      // treeBox 元素的ref   value 绑定的node-key
      if (this.defaultHeightLight) {
        this.$refs.tree.setCurrentKey(this.defaultHeightLight)
      }
    })
  },
  mounted () {
    this.treeHeight = this.$refs.treeMenu.offsetHeight
    this.inputBtnHeight = this.$refs.inputBtnRef.offsetHeight ? this.$refs.inputBtnRef.offsetHeight : 0
    this.titleHeight = this.$refs.titleRef.offsetHeight ? this.$refs.titleRef.offsetHeight : 0
  },
  computed: {
    treeOnHeight () {
      return (this.treeHeight - this.titleHeight - this.inputBtnHeight - 20) + 'px'
    }
  },

  methods: {
    filterNode (value, data, node) {
      let treeHeight = this.$refs.treeMenu.height
      if (!value) {
        return true
      }
      return node.label.indexOf(value) !== -1
    },
    // 清空选中节点
    resetChecked () {
      this.$refs.tree.setCheckedKeys([])
      this.clearBtnDis = true
      this.disabledBtn = true
    },
    onclickNode (data, node) {
      const nodes = this.$refs.tree.getCheckedNodes()

      // 点击节点，默认展开
      if (this.needDefaultExpandedKeys) {
        let expanded = this.$refs.tree.store.nodesMap[data[this.nodeKey]].expanded
        this.$refs.tree.store.nodesMap[data[this.nodeKey]].expanded = !expanded
      }

      // 当有多选框时，才双向绑定数据
      if (this.checkbox) {
        this.$emit('update:getChooses', nodes)
      }
      if (nodes.length !== 0) {
        this.clearBtnDis = false
      } else {
        this.clearBtnDis = true
      }
      this.$emit('clickNode', data)
    },
    handleCheckChange (data, checked, indeterminate) {
      const nodes = this.$refs.tree.getCheckedNodes()
      // 当有多选框时，才双向绑定数据
      this.$emit('update:getChooses', nodes)
      if (nodes.length !== 0) {
        this.clearBtnDis = false
      } else {
        this.clearBtnDis = true
      }
    }
  }
}
</script>

<style lang="scss">
  .tree-menu{
    width: 100%;
    border: 1px solid #8c939d;
    background-color: #e4e7ed;
    clear: both;
    height: 300px;
    position: relative;

    .title {
      background-color: #f3923d;
      color: #ffffff;
      font-weight: 500;
      padding: 10px 15px;
    }

    .tree-con {
      padding: 10px;
      height: 100%;
      .submit-btn{
        margin-top: 5px;
        .el-button {
          margin: 0;
          border-radius: 0;
          border: 1px solid #8c939d;
        }
      }
      .el-tree-node__content{
        padding: 5px 0;
      }

      .tree-scroll {
        .filter-tree {
          min-width: 100%;
          display:inline-block;
          .el-icon-folder-opened {
            color: #1482f0;
            margin-right: 5px;
          }
          .el-icon-document {
            margin-right: 5px;
          }
        }
      }

      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
  }
</style>
